// 用户更换头像的业务处理逻辑js文件
// 1. 初始化裁剪插件
let cropper
getUserInfo(res => {
  // 获取到了用户的头像
  const { user_pic } = res.data.data
  // 如果有上传的情况下
  // JQ 给 标签设置  => src  prop('src',user_pic)
  $('#image').prop('src', user_pic)
  // 希望 => 先获取到user_pic (用户的头像) => image =>赋值
  // 实际  => cropper初始化取的image src = > 默认值
  cropper = new Cropper($("#image")[0], {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
  });
})




// 选择图片
$('.select').on('click', () => {
  // // JS代码来主动触发input[type=file]的点击事件 - 选择文件的窗口就出来
  $("#file").click();
})

// 确定
$('.sure').on('click', () => {
  // 如何获取base64 ???
  let canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
    width: 100,
    height: 100
  });
  let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
  // image/jpeg 是对标签输出的base64字符串做出一个类型的标记
  // 等一会儿把头像base64字符串, 放到img标签的src上, img标签根据类型就知道如何解析这串base64字符串

  // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
  base64Str = encodeURIComponent(base64Str);
  // 后台要的数据格式 => avatar=base64格式的字符串
  let argStr = "avatar=" + base64Str;
  // console.log(base64Str);
  // 
  postUpdateAvatar(argStr, res => {
    console.log('当前的请求成功了 - 图片上传', res);
    // 业务处理
    // 更换页面左上角 和右侧有图像 =>去替换
    window.parent._getUser()
  })
})


// 监听input的change事件
$("#file").on('change', e => {
  //为什么要转成blob对象
  // 需求:file => 渲染到页面上 => cropper.js插件 
  // 如果将图片显示到网页(cropper的内容区)上,人家接收的就是blob对象
  // file =>  url blob()
  // 用人家的插件=>要求你使用插件方法的时候 =>人家用什么=>需要转化成什么格式
  //拿到了图片信息
  let file = e.target.files[0]
  console.log(file);
  let url = URL.createObjectURL(file);
  console.log(url);
  // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
  cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})
// input type number text  = > val()
// input type= file   onchange 事件 
// onchange 事件    当前的值 = > 从无到有   光标消失
// oninput  事件    实时获取用户输入的内容  光标始终都在